<template>
  <div class="boxDiv">
    <v-loadmore :top-method="loadTop"  :auto-fill="false" ref="loadmore">
    <div class="hotComments">
      <div class="myH1">
        <h2 class="textC fl h2" :class="[tabId != 1 ? 'myActive' : '']" @click="findUserCom1(1)">我的跟帖</h2>
        <h2 class="textC fl h2" :class="[tabId != 2 ? 'myActive' : '']" @click="findUserCom1(2)">评论我的</h2>
      </div>
      <p v-if='loadingDom' class='loading'>
        暂无数据
      </p>
      <div class="commentsList" v-for="(item,index) in list" :key="index">
        <div class="commentTop">
          <p class="commentImgBox" style="width:10%;">
            <img class="fl" :src="item[item.length - 1].imagePath?item[item.length - 1].imagePath:$defaultSetting.defaultPortrait" alt=""> 
          </p>
          <div class="commentsName fl">
            <span class="color00a9e8 fontSize30">{{item[item.length - 1].nickname}}</span>
            <span class="colorbebfbf fontSize22">
              <font class="fl">{{item[item.length - 1].addr}}</font>
              <font class="fl">{{item[item.length - 1].device}}</font>
              <font class="fl">{{item[item.length - 1].createTime | dateServer}}</font>
            </span>
          </div>
          <div class="dianzanClass fr textR" @click="comPraiseNum(item[item.length - 1])">
              <span class="fontSize26">
                {{item[item.length - 1].praiseCount}}
              </span>
              <img v-if="item[item.length - 1].exiPraise == false" src="../../assets/img/02.png" alt="">
              <img v-else src="../../assets/img/01.png" alt="">
          </div>
        </div>
        <div class="commentsCent fontSize30">
          <div class="waiweiBox" v-if="item.length>1">
            <div class="commentsList erListbox" v-for="(erItem,erIndex) in item" :key="erIndex" v-if="erIndex<item.length" :class="[erIndex == (item.length - 2) ? 'boderNone' : '',erIndex == (item.length - 1) ? 'displayNone' : '']"> 
              <div class="commentTop">
                <span class="fl bianhao">{{erIndex + 1}}</span>
                <img class="fl" :src="erItem.imagePath?erItem.imagePath:$defaultSetting.defaultPortrait"  alt="">
                <div class="commentsName fl">
                  <span class="color00a9e8 fontSize30">{{erItem.nickname}}</span>
                  <span class="colorbebfbf fontSize22">
                    <font class="fl">{{erItem.addr}}</font>
                    <font class="fl">{{erItem.device}}</font>
                    <font class="fl">{{erItem.createTime | dateServer}}</font>
                  </span>
                </div>
                <div class="dianzanClass fr textR" @click="comPraiseNum(erItem)">
                    <span class="fontSize26">
                      {{erItem.praiseCount}}
                    </span>
                    
                    <img v-if="erItem.exiPraise == false" src="../../assets/img/02.png" alt="">
                    <img v-else src="../../assets/img/01.png" alt="">     
                </div>
              </div>
              <div class="commentsCent fontSize30">
                <div class="addBox">
                  <font class="comtContent">{{erItem.comtContent}}</font>
                </div>
              </div>
            </div>
          </div>
          <div class="addBox">
            <font class="comtContent">{{item[item.length - 1].comtContent}}</font>
          </div>
          <div class="addBox linkBox" @click="linkNewDetail(item[item.length - 1].newsType,item[item.length - 1].newsId,item[item.length - 1].comtUserType,item[0].tNews)">
            <img class="fl" src="../../assets/img/link.png" alt="">
            {{item[0].tNews.title | contentFilters}}
            <img class="fr" src="../../assets/img/jt.png" alt="">
          </div>
        </div>
      </div>
    </div>
    </v-loadmore>
  </div>
</template>
<script>
import apiComments from '../../api/comments'
import {Loadmore} from 'mint-ui'
export default {
  data(){
    return{
      pageNum:1,
      list:[],
      pages:'',
      tabId:1,
      userId:this.$route.params.userId,
      loadingDom: false
    }
  },
  components:{
    'v-loadmore':Loadmore
  },
  mounted(){
    this.findUserCom()
    window.typeList = this.typeList
    window.addEventListener('scroll',()=>{
        if(window.screen.height + window.pageYOffset > (document.body.scrollHeight-30)){
          if(this.pageNum < this.pages){
            this.pageNum++
            this.findUserCom()
          }
        }
      })
  },
  methods:{
    loadTop(){
      this.list = []
      this.findUserCom()
      this.$refs.loadmore.onTopLoaded()
    },
    // 判断加载列表 ->我的跟帖
    findUserCom(){
      let parms = {userId:this.userId,pageNum:1,pageSize:10,comType:this.tabId}
       apiComments.findUserCom(parms).then(data => {
         this.pages = data.body.data.pages
         if(data.body.data.list){
           for(let i=0;i<data.body.data.list.length;i++){
             if(data.body.data.list[i] != ''){
              this.list.push(data.body.data.list[i])
             } 
           }
         }else {
           this.loadingDom = true
         }
       })
    },
    // 切换
    findUserCom1(id){
      this.tabId = id
      this.list = []
      this.loadingDom = false
      this.findUserCom()
    },
    // 跳转到详情页
    linkNewDetail(newsType,newsId,userType,tNews){
       tNews.content = ''
      if(this.$isAndroid){
          window.android.startDetail(window.location.origin + `/h5ext/#/newDetail/`+ newsType + `/` + newsId + `/` + userType + `?userId=` + this.userId,JSON.stringify(tNews))
      }else if(this.$isiOS){
          tNews.detailLink = window.location.origin + `/h5ext/#/newDetail/`+ newsType + `/` + newsId + `/` + userType + `?userId=` + this.userId + `,` + userType
          window.webkit.messageHandlers.startDetail.postMessage(JSON.stringify(tNews))
      }
    },
    // 点赞
    comPraiseNum(item){
      let params = {}
      params = {newsType:item.newsType,newsId:item.newsId,commentId:item.id,userId:this.userId}
      let self = this
      apiComments.comPraiseNum(params).then(data => {
        if(data.body.returnCode == "ERR_0000"){
          item.praiseCount = data.body.data
          item.exiPraise = true
        }
      })
    }
  },
  filters:{
    contentFilters(val){
      if(val != null && val.length > 14) {
        return val.slice(0,14) + '...'
      }else{
        return val
      }
    }
  }
}
</script>

<style src='../../assets/css/comments.css'></style>
